<template>
	<view>
		<view class="orchmain">
			<view class="orch-img">
				<image src="../../../../static/image/shopp.png"></image>
			</view>
			<view class="huodong">
				<view class="huo-img">
					<image src="../../../../static/image/shopp.png"></image>
				</view>
				<view class="huo-infor">
					<view class="huo-infor-txt">简舒仪家居生活馆</view>
					<view class="huo-pinfen margin">
						<image class="huo-xing" v-for="item in 5" src="../../static/xingxing.png"></image>
						<view>5分</view>
					</view>
					<view class="contxt margin">营业时间：08:30 - 21:30</view>
					<view class="contxt margin">商铺地址：安徽省阜阳市颍州区清河西路</view>
					<view class="contxt margin">活动时间：2024.08.07 - 2024.11.24</view>
				</view>
			</view>
			<view class="or-btn">
				<view class="or-btn-lst">
					<image src="../../static/or4.png"></image>
					<view>电话</view>
				</view>
				<view class="or-btn-lst">
					<image src="../../static/or5.png" style="width: 33rpx;"></image>
					<view>约179.6km</view>
				</view>
				<view class="or-btn-lst">
					<image src="../../static/or6.png"></image>
					<view>分享</view>
				</view>
			</view>
		</view>
		<view class="orBtn-main">
			<view class="orBtn-main-left">
				<view class="btn-h">
					<image src="../../static/or7.png"></image>
					<view>首页</view>
				</view>
				<view class="btn-h" @click="share">
					<image src="../../static/or1.png"></image>
					<view>分享</view>
				</view>
				<view class="btn-h">
					<image src="../../static/or2.png"></image>
					<view>我的</view>
				</view>
			</view>
			<view class="orBtn-main-right">
				<view class="go-btn conld">
					<image class="img1" src="../../static/or8.png"></image>
					<view>在线聊</view>
				</view>
				<view class="go-btn conldA">
					<image class="img2" src="../../static/or3.png"></image>
					<view>打电话</view>
				</view>
			</view>
		</view>
		<!-- 分享-->
		<uni-popup ref="recommend" type="bottom" background-color="#fff" border-radius="10px 10px 0 0" :show="true" @close="closePopup">
			<view class="helpMain">
				<view class="helpMainTit">
					<view>分享到</view>
				</view>
				<view class="shareBtn">
					<button open-type="share" hover-class='none' @click="sharePen()">
						<view class="shareBtn_l">
							<image src="../../../../static/image/wechat.png"></image>
							<view>微信好友</view>
						</view>
					</button>
					<view class="shareBtn_l" @click="generatePoster">
						<image src="../../../../static/image/poster.png"></image>
						<view>生成海报</view>
					</view>
				</view>
				<view class="shareclose" @click="closePopup()">
					<button>取消</button>
				</view>
			</view>
		</uni-popup>
		<!-- 海报 -->
		<view class="my-canvas-box" @touchmove.stop.prevent :class="posterInfo.status ? 'show' : 'hide'">
			<view class="conCanvas">
				<view class="cleard" @click="posterInfo.status = false">
					<image src="../../../../static/image/close.png"></image>
				</view>
				<canvas class="my-canvas" :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="myCanvas"></canvas>
				<!-- <image mode="widthFix" :src="getSharePYQurl.url"></image> -->
				<view class="haibao">
					<view class="haibaoBtn" @click.stop="saveSharePic(getSharePYQurl.url)">保存海报</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 用来控制canvas遮罩层的显示与隐藏
				posterInfo: {
					status: false,
				},
				getShareurl:'',//获取朋友分享的海报地址及参数
				getSharePYQurl:'',//朋友圈
				userInfo:'',
				cImahe:'../../static/1.jpg',
				tempFilePath:'',//canvas生成的海报
				canvasW:0,
				canvasH:0,
				avatar:''
			}
		},
		methods: {
			share(){
				this.$refs.recommend.open('bottom')
			},
			closePopup() {//关闭弹窗
				this.$refs.recommend.close()
			},
			sharePen(i){//微信分享
				this.posterInfo.status=false
				this.$refs.recommend.close()
			},
			shareNo(){//海报
				this.posterInfo.status=false
				this.$refs.recommend.close()
			},
			generatePoster(){
				this.posterInfo.status=true
			},
			// 保存海报
			saveSharePic(url) {
				uni.showModal({
					title: '提示',
					content: '确定要保存海报吗？',
					success: function(res) {
						if (res.confirm) {
							uni.downloadFile({
							    url: url,//分享的图片的链接
							    success: (res) => {
									console.log(res)
									// 保存本地
									uni.saveImageToPhotosAlbum({
										filePath:res.tempFilePath,
										success: function() {
											uni.showToast({
												title: '保存成功',
												icon: 'none',
												duration: 3000
											});
										},
										fail: function() {
											uni.showToast({
												title: '保存失败',
												icon: 'none',
												duration: 3000
											});
										}
									});
							    }
							})
						}
					}
				});
			},
			sharehaibao(){//分享海报图片到微信
				uni.downloadFile({
				    url: this.getSharePYQurl.url,//分享的图片的链接
				    success: (res) => {
						console.log(res)
						uni.showShareImageMenu({
							path: res.tempFilePath
							
						})
				    }
				})
				this.posterInfo.status=false
				this.$refs.recommend.close()
			},
			// 生成海报
			generatePoster() {
				let ctx = uni.createCanvasContext('myCanvas', this);
				uni.getImageInfo({
					src: '../../static/1.png', //图片用来做背景
					success: (res) => {
						ctx.save()
						this.canvasW = res.width/2
						this.canvasH = res.height/2
						ctx.drawImage('../../static/1.png', 0,0, this.canvasW,this.canvasH)
						ctx.draw(true)
						ctx.draw(true, setTimeout(() => {
							uni.canvasToTempFilePath({
								canvasId:'canvasID',
								success: (res) => {
									this.tempFilePath = res.tempFilePath
									console.log('filepath',res.tempFilePath);
									ctx.draw();
								}
							},this)
						}, 500))
					},
				})
				this.posterInfo.status=true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.orchmain{
		width: 100%;
		.orch-img{
			width: 100%;
			height: 359rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.huodong{
			width: 90%;
			margin: 0 auto;
			display: flex;
			margin-top: 30rpx;
			.huo-img{
				width: 32%;
				border-radius: 10rpx;
				image{
					width: 202rpx;
					height: 202rpx;
					border-radius: 10rpx;
				}
			}
			.huo-infor{
				width: 65%;
				.huo-infor-txt{
					font-weight: 400;
					font-size: 36rpx;
					color: #333333;
				}
				.huo-pinfen{
					display: flex;
					align-items: center;
					.huo-xing{
						width: 25rpx;
						height: 25rpx;
						margin-right: 4rpx;
					}
				}
			}
		}
	}
	.margin{
		margin-top: 10rpx;
	}
	.contxt{
		width: 100%;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
	}
	.or-btn{
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 85%;
		margin: 0 auto;
		margin-top: 70rpx;
		.or-btn-lst{
			width: 50%;
			text-align: center;
			font-weight: 400;
			font-size: 21rpx;
			color: #333333;
			image{
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
	.orBtn-main{
		position: fixed;
		bottom: 0;
		height: 138rpx;
		background: #FFFFFF;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.orBtn-main-left{
			display: flex;
			align-items: center;
			width: 45%;
			justify-content: space-around;
			.btn-h{
				image{
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
		.orBtn-main-right{
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 50%;
			margin-left: 5%;
			.go-btn{
				width: 161rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				border-radius: 25px;
				justify-content: center;
				.img1{
					width: 27rpx;
					height: 25rpx;
					margin-right: 5rpx;
				}
				.img2{
					width: 25rpx;
					height: 24rpx;
					margin-right: 5rpx;
				}
			}
		}
	}
	.conld{
		background-color: #8EC46E;
	}
	.conldA{
		background-color: #FE9536;
	}
	.helpMain{
		width: 100%;
		font-weight: 400;
		font-size: 21rpx;
		color: #999999;
		.helpMainTit{
			width: 100%;
			color: #333333;
			height: 98rpx;
			line-height: 98rpx;
			font-weight: bold;
			font-size: 38rpx;
			text-align: center;
			image{
				width: 19rpx;
				height: 19rpx;
				margin-top: 20rpx;
			}
		}
		.shareBtn{
			display: flex;
			align-items: center;
			justify-content: space-around;
			text-align: center;
			width: 90%;
			margin: 0 auto;
			height: 240rpx;
			button{
				font-size: 31rpx;
				color: #A6A6A6;
			}
			.shareBtn_l{
				font-size: 31rpx;
				color: #A6A6A6;
				image{
					width: 108rpx;
					height: 108rpx;
					margin-bottom: 8rpx;
				}
			}
		}
		.shareclose{
			border-top: 1px solid #ccc;
			button{
				height: 78rpx;
				line-height: 78rpx;
				text-align: center;
				font-weight: 500;
				font-size: 31rpx;
				color: #333333;
			}
		}
	}
	.my-canvas-box {
		width: 100%;
		height: 100vh;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.6);
		top:0;
		left: 0;
		z-index: 99;
		display: table-cell;
		vertical-align: middle;
		.conCanvas{
			width: 85%;  
			margin: 0 auto;
			margin-top: 160rpx;
			position: relative;
			.cleard{
				position: absolute;
				right: 0;
				z-index: 9;
				margin-top: -25rpx;
				margin-right: -30rpx;
				image{
					width: 46rpx;
					height: 46rpx;
				}
			}
			.my-canvas{
				width: 100%;
				text-align: center;
			}
			/* image{
				width: 100%;
				margin-top: 5vh;
			} */
			.haibao{
				width: 70%;
				margin: 0 auto;
				margin-top: 40rpx;
				.haibaoBtn{
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					background-color: $main-color;
					text-align: center;
					border-radius: 25px;
					font-size: 36rpx;
					color: #FFFFFF;
				}
			}
		}
		&.hide {
			display: none;
		}
	
		&.show {
			display: block;
		}
	}
</style>